<div class="card">
    <div class="card-image  cyan darken-1" style="text-align: center; margin-bottom:1px; height:238px;">
        <div style="float: left; margin-top: 5px; margin-left: 5px; display: inline-block; height:238px;">
            <canvas id="{{ question.id }}" width="180" height="200"></canvas>
        </div>
        <h5 class="white-text" style="display: inline-block;margin-bottom: 63px;">Yes/No Percentage</h5>
        <div style="float: right; display: inline-block; margin-right: 5px;">
            <ul>
                <li style="margin-bottom: 5px !important;">
                    <div class="chip left-align" style="width: 185px;">
                        <i class="Small material-icons left teal-text" style="width: 20px;">star_rate</i>Percent <strong class="teal-text">"Yes"</strong>: {{ stat.percent_yes|floatformat  }}%
                    </div>
                </li>
                <li style="margin-bottom: 5px !important;">
                    <div class="chip left-align" style="width: 185px;">
                        <i class="Small material-icons left teal-text" style="width: 20px;">star_rate</i>Percent <strong class="teal-text">"No"</strong>: {{ stat.percent_no|floatformat  }}%
                    </div>
                </li>
            </ul>
        </div>
        {% comment %}
        <p>
            Total of satisfaction of: {{ stat.percent_no }}<br>
            {{ stat.percent_yes }}<br>
            {{ stat.percent_other }}<br>
        </p>
        {% endcomment %}
    </div>
    <div class="card-content">
        <span class="card-title activator grey-text text-darken-4">Reponses<i class="material-icons right">info_outline</i></span>
        <p>Type: <span class="teal-text">Yes / No Question

        </span></p>
    </div>
    <div class="card-reveal">
        <span class="card-title grey-text text-darken-4">Responses<i class="material-icons right">close</i></span>
        <p>
        <br>
        <h6 class="teal-text">TOTAL RESPONSE: {{ stat.total|floatformat }}</h6><br>
            <span><i class="material-icons teal-text">label</i>COUNT <strong class="teal-text">Yes</strong>: {{ stat.yes_count }}</span><br>
            <span><i class="material-icons teal-text">label</i>COUNT <strong class="teal-text">NO</strong>: {{ stat.no_count }}</span><br>
        </p>
    </div>
</div>